<div class="cover-container">
    <mat-drawer-container class="example-container" autosize>
      <mat-drawer #drawer class="example-sidenav" mode="side">
        <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
        <button (click)="showFiller = !showFiller" mat-raised-button>
          Toggle extra text
        </button>

        <mat-divider></mat-divider>

        <div class="d-grid gap-2 mt-5">
          <button *ngIf="!isAuth" mat-raised-button routerLink="login">Вход</button>
          <button *ngIf="!isAuth" mat-raised-button routerLink="register">Регистрация</button>
          <button *ngIf="isAuth" mat-raised-button routerLink="home">Главная</button>
          <button *ngIf="isAuth" mat-raised-button routerLink="dashboard">Разрешения</button>

          <br>
          <button *ngIf="isAuth" mat-raised-button (click)="onLogout()">Выход</button>
        </div>


      </mat-drawer>

      <div class="example-sidenav-content">
        <mat-toolbar>
          <button (click)="drawer.toggle()" mat-icon-button class="example-icon">
            <mat-icon>menu</mat-icon>
          </button>
          <span>Bank of Secrets</span>
          <span class="example-spacer"></span>
          <button mat-icon-button class="example-icon favorite-icon">
            <mat-icon>key</mat-icon>
          </button>
          <button mat-icon-button class="example-icon">
            <mat-icon>share</mat-icon>
          </button>
          <button routerLink="acc" mat-icon-button class="example-icon">
            <mat-icon>person</mat-icon>
          </button>
          <span *ngIf="isAuth">{{sessia?.userName}}</span>

        </mat-toolbar>


        <main role="main" class="cover-container">
          <router-outlet></router-outlet>
        </main>
      </div>

    </mat-drawer-container>

</div>







